<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>dataList</view>
				<view>Array</view>
				<view>无</view>
				<view>表单数据集</view>
			</view>
			<view class="tr">
				<view>labelWidth</view>
				<view>Number</view>
				<view>6</view>
				<view>标签宽，单位字符</view>
			</view>
			<view class="tr">
				<view>labelAlign</view>
				<view>String</view>
				<view>left</view>
				<view>标签水平对齐，可选left、right、center</view>
			</view>
			<view class="tr">
				<view>labelClass</view>
				<view>String</view>
				<view>	</view>
				<view>标签样式名，仅对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>labelBold</view>
				<view>Boolean</view>
				<view>false</view>
				<view>标签加粗</view>
			</view>
			<view class="tr">
				<view>controlClass</view>
				<view>String</view>
				<view>	</view>
				<view>控件框样式名，仅对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>formClass</view>
				<view>String</view>
				<view>无</view>
				<view>表单样式类名，仅对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>formStyle</view>
				<view>String</view>
				<view>normal</view>
				<view>表单样式，normal下划线类型、table单元格类型</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>控件预设尺寸</view>
			</view>
			<view class="tr">
				<view>space</view>
				<view>Number</view>
				<view>1</view>
				<view>标签和控件间距，单位字符</view>
			</view>
			<view class="tr">
				<view>maxLength</view>
				<view>Number</view>
				<view>140</view>
				<view>默认输入框输入最大字符</view>
			</view>
			<view class="tr">
				<view>areaMaxlength</view>
				<view>Number</view>
				<view>500</view>
				<view>默认文本域输入最大字符</view>
			</view>
			<view class="tr">
				<view>areaHeight</view>
				<view>Number</view>
				<view>3</view>
				<view>默认文本域高度，单位行数</view>
			</view>
			<view class="tr">
				<view>areaExtendHeight</view>
				<view>Array,Object</view>
				<view>[8,160],[12,240]</view>
				<view>文本域扩展高度，字数达到多少时设为多高。格式[高度行数,中文字数]或{rows:高度行数,words:中文字数}</view>
			</view>
			<view class="tr">
				<view>submitWidth</view>
				<view>String, Number</view>
				<view>无</view>
				<view>提交按钮自定宽，需带单位，或0。0和空值等于不设置</view>
			</view>
			<view class="tr">
				<view>submitHeight</view>
				<view>String, Number</view>
				<view>无</view>
				<view>提交按钮自定高，需带单位，或0。0和空值等于不设置</view>
			</view>
			<view class="tr">
				<view>submitDelay</view>
				<view>String, Number</view>
				<view>无</view>
				<view>延迟提交，用于提交按钮。单位毫秒</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色，与内部组件同步</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定主题色，与内部组件同步</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>circle</view>
				<view>自定圆角，需带单位，或0。与内部组件同步</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>表单禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>表单只读</view>
			</view>
			<view class="tr">
				<view>submitButton</view>
				<view>Boolean</view>
				<view>true</view>
				<view>是否显示提交按钮</view>
			</view>
			<view class="tr">
				<view>breakRow</view>
				<view>Boolean</view>
				<view>false</view>
				<view>断行，标签与控件是否分行显示</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>required：icon-required 必填</view>
					<view>calendar：icon-calendar 日期</view>
					<view>select：icon-arr-down 下拉选择</view>
					<view>info：icon-information 提示信息</view>
					<view>warning：icon-err 警告信息</view>
					<view>error：icon-err 错误信息</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>submit：提交　提交按钮</view>
					<view>tipFormError：您填写的信息有误，请修改后提交　出错提示</view>
					<view>checkErr：输入内容必须与字段${value}的内容一致　出错提示</view>
				</view>
			</view>
		</view>

		
		<view class="bold my-e0p5 fontSize-lg indent">
			dataList字段格式
		</view>
		<view class="p-sm">
			<vi-collapse title="通用属性" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>控件类型，不同控件填入不同值</view>
					</view>
					<view class="tr">
						<view>name</view>
						<view>String</view>
						<view>字段名，表单提交时生成的字段属性名</view>
					</view>
					<view class="tr">
						<view>label</view>
						<view>String</view>
						<view>标签内容</view>
					</view>
					<view class="tr">
						<view>labelPlace</view>
						<view>Boolean</view>
						<view>标签内容为空时是否占位</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>变化</view>
						<view>控件初始值。根据不同控件格式有变化</view>
					</view>
					<view class="tr">
						<view>disabled</view>
						<view>Boolean</view>
						<view>控件禁用，表单非禁用时此控制有效</view>
					</view>
					<view class="tr">
						<view>readOnly</view>
						<view>Boolean</view>
						<view>控件只读，表单非禁用，非只读时此控制有效</view>
					</view>
					<view class="tr">
						<view>breakRow</view>
						<view>Boolean</view>
						<view>断行，标签与控件是否分行显示。表单非断行时此控制有效</view>
					</view>
					<view class="tr">
						<view>checkRule</view>
						<view>Objec, String, Array</view>
						<view>字段校验规则，详细见下方</view>
					</view>
					<view class="tr">
						<view>errMsg</view>
						<view>String</view>
						<view>校验失败提示，不设置则使用api内定义</view>
					</view>
					<view class="tr">
						<view>showSuccese</view>
						<view>Boolean</view>
						<view>显示校验成功样式。开启后，控件值改变立即校验</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="字符输入控件　text / number" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>固定值：text / number</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>String</view>
						<view>初始值</view>
					</view>
					<view class="tr">
						<view>placeholder</view>
						<view>String</view>
						<view>空值提示</view>
					</view>
					<view class="tr">
						<view>maxlength</view>
						<view>Number</view>
						<view>最大输入长度，表单maxlength为0时此控制有效</view>
					</view>
					<view class="tr">
						<view>encode</view>
						<view>Object</view>
						<view>信息保护，控件只读或禁用时有效</view>
					</view>
					<view class="tr">
						<view>	</view>
						<view>
							格式：{ max:0, min:3, start:2, replace:"*" }
							<view>max：显示最大长度，超过字数不显示</view>
							<view>min：显示最小长度，不够字数用替换符填充</view>
							<view>start：保留显示长度，超过长度的字符用替换符替换</view>
						</view>
					</view>
					<view class="tr">
						<view>beforeAddon</view>
						<view>Object</view>
						<view>显示图标或文字前缀</view>
					</view>
					<view class="tr">
						<view>	</view>
						<view>
							格式：{ class:"", icon:"", value:"" }
							<view>class：样式名，仅全局样式有效</view>
							<view>icon：iconfont图标类名，优先于文字显示</view>
							<view>value：文字显示</view>
						</view>
					</view>
					<view class="tr">
						<view>afterAddon</view>
						<view>Object</view>
						<view>显示图标或文字后缀</view>
					</view>
					<view class="tr">
						<view>	</view>
						<view>
							格式：{ class:"", icon:"", value:"" }
							<view>class：样式名，仅全局样式有效</view>
							<view>icon：iconfont图标类名，优先于文字显示</view>
							<view>value：文字显示</view>
						</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="多行字符输入控件　textarea" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>固定值：textarea</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>String</view>
						<view>初始值</view>
					</view>
					<view class="tr">
						<view>placeholder</view>
						<view>String</view>
						<view>空值提示</view>
					</view>
					<view class="tr">
						<view>maxlength</view>
						<view>Number</view>
						<view>最大输入长度，表单areaMaxlength为0时此控制有效</view>
					</view>
					<view class="tr">
						<view>autoHeight</view>
						<view>Boolean</view>
						<view>文本域随输入自动撑高</view>
					</view>
					<view class="tr">
						<view>height</view>
						<view>Number</view>
						<view>文本域默认高，单位行</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="密码　password" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>固定值：password</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>String</view>
						<view>初始值</view>
					</view>
					<view class="tr">
						<view>placeholder</view>
						<view>String</view>
						<view>空值提示</view>
					</view>
					<view class="tr">
						<view>maxlength</view>
						<view>Number</view>
						<view>最大输入长度，表单maxlength为0时此控制有效</view>
					</view>
					<view class="tr">
						<view>password</view>
						<view>Boolean</view>
						<view>文本是否隐藏</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="发送验证码　sendcode" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>
							type
						</view>
						<view>
							String
						</view>
						<view>
							固定值：sendcode
						</view>
					</view>
					<view class="tr">
						<view>
							value
						</view>
						<view>
							String
						</view>
						<view>
							初始值
						</view>
					</view>
					<view class="tr">
						<view>
							placeholder
						</view>
						<view>
							String
						</view>
						<view>
							空值提示
						</view>
					</view>
					<view class="tr color-error">
						该控件为业务组件，需在module-sendcode中完成业务功能，输入手机号点击发送验证码。已在组件内进行数据校验
					</view> 
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="日期选择　date" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>固定值：date</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>Number</view>
						<view>初始值，时间戳。初始自动进行类型转换，得出隐性字段showValue的值</view>
					</view>
					<view class="tr">
						<view>placeholder</view>
						<view>String</view>
						<view>空值提示</view>
					</view>
					<view class="tr">
						<view>start</view>
						<view>String</view>
						<view>控件起始日期，格式YYYY-MM-DD</view>
					</view>
					<view class="tr">
						<view>end</view>
						<view>String</view>
						<view>控件结束日期，格式YYYY-MM-DD</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="时间选择　time" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>固定值：time</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>String</view>
						<view>初始值，格式hh:mm</view>
					</view>
					<view class="tr">
						<view>placeholder</view>
						<view>String</view>
						<view>空值提示</view>
					</view>
					<view class="tr">
						<view>start</view>
						<view>String</view>
						<view>控件起始时间，格式hh:mm</view>
					</view>
					<view class="tr">
						<view>end</view>
						<view>String</view>
						<view>控件结束时间，格式hh:mm</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="单/复选框　radio / checkbox" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>固定值：radio / checkbox</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>String, Number / Array</view>
						<view>初始值，单选框时为单个值，复选框时为数组</view>
					</view>
					<view class="tr extra">
						<view class="body">
							<view>options</view>
							<view>Array (Object)</view>
							<view>选项列表</view>
						</view>
						<view class="appendix">
							格式：{ name:"",	 value:"", disabled:false, readOnly:false}
							<view>name：显示值</view>
							<view>value：实际值</view>
							<view>disabled：单个选项禁用</view>
							<view>readOnly：单个选项只读</view>
						</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="滑动条取值　slider" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>固定值：slider</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>Number / Array</view>
						<view>初始值，未开启选区时为单个数字，开启选区为数组</view>
					</view>
					<view class="tr">
						<view>range</view>
						<view>Boolean</view>
						<view>是否开启选区</view>
					</view>
					<view class="tr">
						<view>min</view>
						<view>Number</view>
						<view>最小值</view>
					</view>
					<view class="tr">
						<view>max</view>
						<view>Number</view>
						<view>最大值</view>
					</view>
					<view class="tr">
						<view>tips</view>
						<view>Boolean, String</view>
						<view>当前数值显示方式，false不显示，true水平显示，float跟随滑块浮动</view>
					</view>
					<view class="tr">
						<view>unit</view>
						<view>String</view>
						<view>数值单位，填入显示文字</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="开关　switch" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>固定值：switch</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>Number / Array</view>
						<view>初始值，未开启选区时为单个数字，开启选区为数组</view>
					</view>
					<view class="tr">
						<view>template</view>
						<view>String</view>
						<view>在开关按钮前的内容模板</view>
					</view>
					<view class="tr">
						<view>placeholder</view>
						<view>String</view>
						<view>无内容模板时的提示文字</view>
					</view>
					<view class="tr">
						<view>url</view>
						<view>String</view>
						<view>点击内容模板或提示文字的链接跳转url</view>
					</view>
					<view class="tr">
						<view>urlType</view>
						<view>String</view>
						<view>链接跳转方式</view>
					</view>
					<view class="tr">
						<view>mode</view>
						<view>String</view>
						<view>开关模式，默认模式使用checked的值。value绑定值模式，搭配onValue、offValue使用</view>
					</view>
					<view class="tr">
						<view>checked</view>
						<view>Boolean</view>
						<view>默认开关状态。没有设置mode时有效</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>String, Number, Boolean</view>
						<view>开关当前值，mode为value时有效</view>
					</view>
					<view class="tr">
						<view>onValue</view>
						<view>String</view>
						<view>开关开启值，mode为value时，开关打开时向外提交此值</view>
					</view>
					<view class="tr">
						<view>offValue</view>
						<view>String</view>
						<view>开关关闭值，mode为value时，开关关闭时向外提交此值</view>
					</view>
					<view class="tr">
						<view>buttonIcon</view>
						<view>String</view>
						<view>按钮内图标，iconfont图标类名，优先于文字</view>
					</view>
					<view class="tr">
						<view>buttonText</view>
						<view>String</view>
						<view>按钮内文字。使用slot会覆盖</view>
					</view>
					<view class="tr">
						<view>buttonClass</view>
						<view>String</view>
						<view>按钮样式类名</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="步进器　stepper" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>固定值：stepper</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>Number</view>
						<view>初始值</view>
					</view>
					<view class="tr">
						<view>min</view>
						<view>Number</view>
						<view>最小值</view>
					</view>
					<view class="tr">
						<view>max</view>
						<view>Number</view>
						<view>最大值</view>
					</view>
					<view class="tr">
						<view>step</view>
						<view>Number</view>
						<view>步阶</view>
					</view>
					<view class="tr">
						<view>decimals</view>
						<view>Number</view>
						<view>固定显示小数位</view>
					</view>
					<view class="tr">
						<view>maxlength</view>
						<view>Number</view>
						<view>最大输入长度</view>
					</view>
					<view class="tr">
						<view>boxWidth</view>
						<view>Number</view>
						<view>输入框宽度</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="选择器　select" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>固定值：select</view>
					</view>
					<view class="tr">
						<view>mode</view>
						<view>String</view>
						<view>
							选择模式，可选：
							<view>radio：单选（默认）</view>
							<view>checkbox：多选</view>
						</view>
					</view>
					<view class="tr">
						<view>isTree</view>
						<view>Boolean, String</view>
						<view>
							是否树，可选：
							<view>false：不是树（默认）</view>
							<view>tree（或true）：普通树</view>
							<view>page：翻页树</view>
						</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>Number, String, Boolean, Array</view>
						<view>初始值，根据单/多选模式变化为，单个值或数组</view>
					</view>
					<view class="tr">
						<view>min</view>
						<view>Number</view>
						<view>最少选择数</view>
					</view>
					<view class="tr">
						<view>max</view>
						<view>Number</view>
						<view>最大选择数</view>
					</view>
					<view class="tr">
						<view>treeSet</view>
						<view>Object</view>
						<view>树设置，参照vi-select组件内定义</view>
					</view>
					<view class="tr">
						<view>keys</view>
						<view>Object</view>
						<view>数据关键字设置，组件内默认name/value/children</view>
					</view>
					<view class="tr">
						<view>placeholder</view>
						<view>String</view>
						<view>空值提示</view>
					</view>
					<view class="tr extra">
						<view class="body">
							<view>options</view>
							<view>Array (Object)</view>
							<view>选项列表</view>
						</view>
						<view class="appendix">
							格式：{ name:"",	 value:"" }
							<view>name：显示值</view>
							<view>value：实际值</view>
						</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{'&lt;common-form-creator :dataList="dataList">&lt;/common-form-creator>'}}
			</view>
			<view class="py-sm">
				<!-- #ifdef H5 || APP-PLUS -->
				<common-form-creator :dataList="dataList"
					:labelWidth="options.labelWidth"
					:labelAlign="options.labelAlign"
					:labelBold="options.labelBold"
					:formStyle="options.formStyle"
					:size="options.size"
					:space="options.space"
					:labelPlace="options.labelPlace"
					:breakRow="options.breakRow"
					:maxLength="options.maxLength"
					:areaMaxlength="options.areaMaxlength"
					:areaHeight="options.areaHeight"
					:submitWidth="options.submitWidth"
					:type="options.type"
					:color="options.color"
					:radius="options.radius"
					:activeSubmit="options.activeSubmit"
					@submit="formSubmit"></common-form-creator>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<common-form-creator-mp :dataList="dataList"
					:labelWidth="options.labelWidth"
					:labelAlign="options.labelAlign"
					:labelBold="options.labelBold"
					:formStyle="options.formStyle"
					:size="options.size"
					:space="options.space"
					:labelPlace="options.labelPlace"
					:breakRow="options.breakRow"
					:maxLength="options.maxLength"
					:areaMaxlength="options.areaMaxlength"
					:areaHeight="options.areaHeight"
					:submitWidth="options.submitWidth"
					:type="options.type"
					:color="options.color"
					:radius="options.radius"
					:activeSubmit="options.activeSubmit"
					@submit="formSubmit"></common-form-creator-mp>
				<!-- #endif -->
			</view>
		</view>
		<view class="p-sm">
			<view class="py-sm bold">
				示例表单：
			</view>
			<view class="py-sm">
				<!-- #ifdef H5 || APP-PLUS -->
				<common-form-creator :dataList="demoList"
					:labelWidth="options.labelWidth"
					:labelAlign="options.labelAlign"
					:labelBold="options.labelBold"
					:formStyle="options.formStyle"
					:size="options.size"
					:space="options.space"
					:labelPlace="options.labelPlace"
					:breakRow="options.breakRow"
					:maxLength="options.maxLength"
					:areaMaxlength="options.areaMaxlength"
					:areaHeight="options.areaHeight"
					:submitWidth="options.submitWidth"
					:type="options.type"
					:color="options.color"
					:radius="options.radius"
					></common-form-creator>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<common-form-creator-mp :dataList="demoList"
					:labelWidth="options.labelWidth"
					:labelAlign="options.labelAlign"
					:labelBold="options.labelBold"
					:formStyle="options.formStyle"
					:size="options.size"
					:space="options.space"
					:labelPlace="options.labelPlace"
					:breakRow="options.breakRow"
					:maxLength="options.maxLength"
					:areaMaxlength="options.areaMaxlength"
					:areaHeight="options.areaHeight"
					:submitWidth="options.submitWidth"
					:type="options.type"
					:color="options.color"
					:radius="options.radius"
					></common-form-creator-mp>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options:{
					activeSubmit:true,
					labelWidth:6,
					labelAlign:"left",
					labelBold:false,
					formStyle:"normal",
					size:"md",
					space:1,
					labelPlace:true,
					breakRow:false,
					maxLength:50,
					areaMaxlength:50,
					areaHeight:3,
					submitWidth:0,
					type:"primary",
					color:"",
					radius:"circle",
					activeSubmit:true,
				},
				dataList:[
					{
						type:"slider",
						name:"labelWidth",
						label:"标签宽",
						value:6,
						max:15,
						unit:"em"
					},
					{
						type:"select",
						name:"labelAlign",
						label:"标签对齐方式",
						value:"left",
						options:[
							{ name:"左对齐", value:"left"},
							{ name:"右对齐", value:"right"},
							{ name:"居中", value:"center"}
						],
					},
					{
						type:"select",
						name:"labelBold",
						label:"标签加粗",
						value:false,
						options:[
							{ name:"不加粗", value:false},
							{ name:"加粗", value:true},
						],
					},
					{
						type:"select",
						name:"formStyle",
						label:"表单样式",
						value:"normal",
						options:[
							{ name:"正常", value:"normal"},
							{ name:"表格", value:"table"}
						],
					},
					{
						type:"select",
						name:"size",
						label:"预设尺寸",
						value:"md",
						options:[
							{ name:"小", value:"sm"},
							{ name:"中等", value:"md"},
							{ name:"大", value:"lg"}
						],
					},
					{
						type:"slider",
						name:"space",
						label:"标签和控件间距",
						value:1,
						max:5,
						unit:"em"
					},
					{
						type:"select",
						name:"labelPlace",
						label:"空标签占位",
						value:true,
						options:[
							{ name:"开启", value:true},
							{ name:"关闭", value:false}
						],
					},
					{
						type:"select",
						name:"breakRow",
						label:"控件换行",
						value:false,
						options:[
							{ name:"开启", value:true},
							{ name:"关闭", value:false}
						],
					},
					{
						type:"slider",
						name:"maxLength",
						label:"输入框最大输入长度",
						value:50,
						max:50,
						unit:"字符"
					},
					{
						type:"text",
						name:"",
						label:"",
						value:"",
						placeholder:"输入测试"
					},
					{
						type:"slider",
						name:"areaMaxlength",
						label:"文本域最大输入长度",
						value:50,
						max:100,
						unit:"字符"
					},
					{
						type:"textarea",
						name:"",
						label:"",
						value:"",
						placeholder:"输入测试"
					},
					{
						type:"slider",
						name:"areaHeight",
						label:"文本域默认高度",
						value:3,
						min:2,
						max:6,
						unit:"行"
					},
					{
						type:"slider",
						name:"submitWidth",
						label:"提交按钮宽度",
						value:50,
						min:10,
						max:100,
						unit:"%"
					},
					{
						type:"text",
						name:"test",
						value:"删除文字使校验失败",
						placeholder:"输入测试，必填",
						checkRule:"required"
					},
					{
						type:"select",
						name:"type",
						label:"颜色主题",
						value:"primary",
						options:[
							{ name:"第一主题", value:"primary"},
							{ name:"第二主题", value:"second"},
							{ name:"第三主题", value:"third"},
							{ name:"第四主题", value:"fourth"},
							{ name:"第五主题", value:"fifth"},
						],
					},
					{
						type:"text",
						name:"color",
						label:"自定义颜色主题",
						value:"",
						placeholder:"输入有效颜色值"
					},
					{
						type:"text",
						name:"radius",
						label:"圆角",
						value:"circle",
						placeholder:"输入带单位数值"
					},
					{
						type:"select",
						name:"activeSubmit",
						label:"表单动态提交",
						value:true,
						options:[
							{ name:"开启", value:true},
							{ name:"关闭", value:false}
						],
					},
				],
				demoList:[
					{
						type:"text",
						name:"a",
						label:"文字类型",
						value:"",
						placeholder:"输入文字"
					},
					{
						type:"number",
						name:"b",
						label:"数字类型",
						value:"",
						placeholder:"输入数字"
					},
					{
						type:"password",
						name:"c",
						label:"密码类型",
						value:"",
						placeholder:"输入密码"
					},
					{
						type:"sendcode",
						name:"d",
						label:"发送验证码",
						value:"",
						placeholder:"输入手机号"
					},
					{
						type:"textarea",
						name:"e",
						label:"文本域",
						value:"",
						placeholder:"输入文字"
					},
					{
						type:"date",
						name:"f",
						label:"选择日期",
						value:"",
						placeholder:"选择日期"
					},
					{
						type:"select",
						name:"h",
						label:"选择",
						value:"",
						options:[
							{name:"全部", value:""},
							{name:"选项一", value:1},
							{name:"选项二", value:2},
						],
						placeholder:"请选择"
					},
					{
						type:"radio",
						name:"i",
						label:"单项选择",
						value:"",
						options:[
							{name:"选项一", value:1},
							{name:"选项二", value:2},
							{name:"选项三", value:3},
						],
					},
					{
						type:"checkbox",
						name:"j",
						label:"多项选择",
						value:"",
						options:[
							{name:"选项一", value:1},
							{name:"选项二", value:2},
							{name:"选项三", value:3},
						],
					},
					{
						type:"slider",
						name:"k",
						label:"滑动取值",
						value:5,
						max:10
					},
					{
						type:"switch",
						name:"l",
						label:"开关",
						value:false,
						placeholder:"用户协议，点击链接跳转",
						url:"http://baidu.com",
						urlType:"outside"
					},
					{
						type:"stepper",
						name:"m",
						label:"数字步进",
						value:5,
						max:88
					},
				]
			}
		},
		methods: {
			formSubmit(e){
				console.log("表单数据",e);
				e.submitWidth = e.submitWidth? e.submitWidth+"%" :"";
				this.options = e
			}
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
